import React, { Component } from 'react';
import {
    View, Text, TextInput, TouchableOpacity, 
    Image, StatusBar, FlatList, SectionList
} from 'react-native';
import MCV from './MCV';

import {arrMood} from './DataHandler';

class DiaryItem extends Component {
    constructor(props) {
        super(props);
    }

    _onPress = () => {
        const {ID, index} = this.props;
        this.props.selectListItem(ID, index);
    }

    render() {
        const {title, time, mood} = this.props;
        return (
            <View style={MCV.secondRow}>
                <Image style={MCV.moodStyle} 
                    source={arrMood[mood]}/>
                <View style={MCV.subViewInReader}>
                    <TouchableOpacity onPress={this._onPress}>
                        <Text style={MCV.textInReader}>
                            {title}
                        </Text>
                    </TouchableOpacity>
                    <Text style={MCV.textInReader}>
                        {time}
                    </Text>
                </View>
            </View>
        );
    }
}

export default class DiaryList extends Component {
    constructor(props) {
        super(props);
    }

    updateSearchKeyword = (newWord) => {
        this.props.searchKeyword(newWord);
    }

    render() {
        return (
            <View style={MCV.container}>
                <StatusBar hidden={true} />
                <View style={MCV.firstRow}>
                    <View style={{borderWidth:1}}>
                        <TextInput    autoCapitalize = 'none'
                            placeholder = '输入搜索关键字'
                            clearButtonMode = 'while-editing'
                            onChangeText = { this.updateSearchKeyword }
                            style={MCV.searchBarTextInput}
                        />
                    </View>
                    <TouchableOpacity onPress={this.props.writeDiary} >
                        <Text style={MCV.middleButton}>
                            写日记
                        </Text>
                    </TouchableOpacity>
                </View>
                {
                    (this.props.diaryList.length == 0) ?
                    (
                        <View style={{flex:1, justifyContent: 'center'}}>
                            <Text style={{fontSize:18}}>
                                您还没有写日记哦
                            </Text>
                        </View>
                    ) :
                    (
                    // <FlatList 
                    //     data={this.props.diaryList}
                    //     keyExtractor={(item,index) => item.ID.toString()}
                    //     renderItem={this._renderItem}
                    // />
                        <SectionList
                            bounces={false}
                            sections={this.props.sections}
                            renderItem={this._renderItem}
                            keyExtractor={(item,index)=>index}
                            renderSectionHeader={this._renderSectionHeader}
                        />
                    )
                } 
            </View>
        );
    }

    _renderItem = ({item,index}) => {
        // console.log(`item : ${item}`);
        return (
            <DiaryItem index={index}
                ID={item.ID.toString()}
                title={item.title}
                time={item.time}
                mood={item.mood}
                selectListItem={this.props.selectListItem}
            />
        );
    }

    _renderSectionHeader = ({section}) => {
        // console.log(section);
        return (
            <View style={MCV.section}>
                <Text style={MCV.sectionText}>{section.title}</Text>
            </View>
        );
    }

}